<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :model="formInline" class="demo-form-inline">
            <el-row>
              <el-col :span="6" class="a">
                <el-form-item label="车牌号码:">
                  <el-input v-model="pageParams.carNumber" placeholder="请输入车牌号码" style="width:200px" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="6" class="a">
                <el-form-item label="车主姓名:">
                  <el-input v-model="pageParams.personName" placeholder="请输入车主姓名" style="width:200px" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="6" class="a">
                <el-form-item label="状态：">
                  <el-select v-model="pageParams.cardStatus" placeholder="全部" style="width:200px" size="mini">
                    <el-option label="可用" value="0" />
                    <el-option label="已过期" value="1" />
                    <el-option label="全部" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button type="primary" size="mini" @click="inquire">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="fixel">
          <div>
            <el-button type="primary" size="mini" @click="$router.push('/addMonthCard')">添加月卡</el-button>
            <el-button type="primary" size="mini" @click="batchDel">批量删除</el-button>
          </div>
          <div>
            <span class="yanse">
              <i class="el-icon-warning" /> 本园区共计 470728 个车位，月卡用户 0 人，车位占有率 0.00%</span>
          </div>
        </div>
        <el-table :data="list" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column prop="id" align="center" width="50" label="序号" type="index" />
          <el-table-column prop="personName" align="center" width="100" label="车主名称" />
          <el-table-column prop="phoneNumber" align="center" width="150" label="联系方式" />
          <el-table-column prop="carNumber" align="center" width="100" label="车牌号码" />
          <el-table-column prop="carBrand" align="center" width="100" label="车牌品牌" />
          <el-table-column prop="totalEffectiveDate" align="center" width="100" label="剩余天数" />
          <el-table-column prop="cardStatus" align="center" label="状态">
            <template v-slot="{ row }">
              <span v-if="row.cardStatus === 0">可用</span>
              <span v-else-if="row.cardStatus === 1">已过期</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作">
            <template v-slot="{ row }">
              <el-button size="mini" type="text" @click="$router.push(`/renewMonthCard/${row.id}`)">续费</el-button>
              <el-button size="mini" type="text" @click="$router.push(`/viewMonthCard/${row.id}`)">查看</el-button>
              <el-button size="mini" type="text" @click="$router.push(`/addMonthCard/${row.id}`)">编辑</el-button>
              <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total,  prev, pager, next,sizes "
            :total="pageParams.total"
            @size-change="currentChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { deleteParkingCard, deleteParkingCardBatchDel, getCardList } from '@/api/TrafficManagement/monthCar'
export default {
  name: 'MonthCar',
  data() {
    return {
      list: [],
      pageParams: {
        page: 1, // 页数
        pageSize: 10, // 条数
        total: 0, // 总页数
        carNumber: '', // 车牌号
        personName: '', // 车主姓名
        cardStatus: '' // 状态 '0':可用，'1':已过期
      },
      formInline: {
        id: 0, // 月卡车辆id
        personName: '', // 车主姓名
        phoneNumber: '', // 联系方式
        carNumber: '', // 车牌号
        carBrand: '', // 车辆品牌
        cardStatus: 0, // 月卡状态 0可用，1已过期
        totalEffectiveDate: 4// 剩余有效天数
      },
      renew: 1,

      selectedRows: []

    }
  },

  created() {
    this.getCardList()
  },
  methods: {
    // 渲染页面
    async getCardList() {
      const res = await getCardList({ page: this.pageParams.page, pageSize: this.pageParams.pageSize })
      this.list = res.data.rows
      this.pageParams.total = res.data.total
    },
    // 模糊搜素
    async inquire() {
      const res = await getCardList({ carNumber: this.pageParams.carNumber, personName: this.pageParams.personName, cardStatus: this.pageParams.cardStatus })
      this.list = res.data.rows
    },
    // 删除
    async del(id) {
      this.$confirm('你确定删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteParkingCard(id)
        // 刷新页面
        this.getCardList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },

    async batchDel() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择需要删除的数据')
        return
      }
      // 获取选中数据项的id（假设数据项有唯一的id字段）
      const selectedIds = this.selectedRows.map(item => item.id)

      // 在这里进行与后端的交互，调用删除接口
      // 根据您的具体情况，可能需要使用axios等HTTP库来发送请求
      // 以下是一个示例的异步请求
      // 注意要处理请求成功和失败的情况，并刷新数据列表

      // 调用删除接口并传递选中的id数组
      await deleteParkingCardBatchDel(selectedIds)
        .then(response => {
        // 请求成功，根据返回的结果处理逻辑
        // 比如从数据列表中移除已删除的数据
          this.list = this.list.filter(item => !selectedIds.includes(item.id))
          // 清空选中的数据项
          this.selectedRows = []
          // 提示用户删除成功
          this.$message.success('批量删除成功')
        })
        .catch(error => {
        // 请求失败，根据需要处理错误情况
          console.error('批量删除失败：', error)
          this.$message.error('批量删除失败')
        })
    },

    // 当前页
    currentChange(page) {
      this.pageParams.page = page
      this.getAreaList()
    },
    // 每页数量
    handleCurrentChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.getAreaList()
    }

  }
}

</script>
<style scoped>
.a{
  margin-right: 10px;
}
.fixel{
display: flex;
justify-content:space-between;
}
.yanse{
  display: block;
  width: 500px;
  height: 40px;
  border: 1px solid #a6ddff;
  background-color: #e6f7ff;
  text-align: center;
  line-height: 40px;
}
.el-card .yanse{
  color: #1890ff !important;
}
.block{
float: right;
margin-top: 20px;
}
</style>
